<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, user-scalable=no" />	
		<title>详情</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/font-awesome.css" />
		<link rel="stylesheet" href="css/swiper.min.css" />
	</head>
	<body>
		<div class="tb-logo">
	    	<span class="float-l pic"><img src="img/logo.png" alt="" /></span>
	    	<div class="tb-srch">
		    	<span class="shuru"></sp><input type="text" /></span>
		    	<span class="fa fa-search btn" aria-hidden="true"></span>
		    </div>
	    </div>	 
	   
	   
	    <ul class="list-tb">
	    	<li>首页</li>
	    	<li class="li-choose">电影</li>
	    	<li>电视剧</li>
	    	<li>动漫</li>
	    </ul>
	    <div class="js">
	    	<span style="line-height: 22px;">剧集检索</span>
	    	<span class="btn float-r">筛选</span>
	    	<div class="content">
	    		<div class="bd">
	    			<div class="mc">
	    				地区:
	    			</div>
	    			<div class="js-list">
				    	<div class="swiper-container ss">
			                <div class="swiper-wrapper text-center active-tab">
			                    <div class="swiper-slide chose">全部</div>
			                    <div class="swiper-slide ">内地</div>
			                    <div class="swiper-slide ">香港</div>
			                    <div class="swiper-slide ">台湾</div>
			                    <div class="swiper-slide ">日本</div>
			                    <div class="swiper-slide ">韩国</div>
			                    <div class="swiper-slide ">美国</div>
			                    <div class="swiper-slide ">印度</div>
			                    <div class="swiper-slide ">泰国</div>
			                    <div class="swiper-slide ">欧洲</div>
			                    <div class="swiper-slide ">其他</div>
			                </div>
			            </div>
	                </div>
	    		</div>
	    		<div class="bd">
	    			<div class="mc">
	    				类型:
	    			</div>
	    			<div class="js-list">
				    	<div class="swiper-container">
			                <div class="swiper-wrapper text-center active-tab">
			                    <div class="swiper-slide chose">全部</div>
			                    <div class="swiper-slide ">喜剧</div>
			                    <div class="swiper-slide ">悲剧</div>
			                    <div class="swiper-slide ">爱情</div>
			                    <div class="swiper-slide ">动作</div>
			                    <div class="swiper-slide ">枪战</div>
			                    <div class="swiper-slide ">犯罪</div>
			                    <div class="swiper-slide ">惊悚</div>
			                    <div class="swiper-slide ">恐怖</div>
			                    <div class="swiper-slide ">悬疑</div>
			                    <div class="swiper-slide ">悬疑</div>
								<div class="swiper-slide ">动画</div>
								<div class="swiper-slide ">家庭</div> 
								<div class="swiper-slide ">奇幻</div>
								<div class="swiper-slide ">魔幻</div> 
								<div class="swiper-slide ">科幻</div>
								<div class="swiper-slide ">战争</div>
			                </div>
			            </div>
	                </div>
	    		</div>
	    		<div class="bd">
	    			<div class="mc">
	    				年份:
	    			</div>
	    			<div class="js-list">
				    	<div class="swiper-container">
			                <div class="swiper-wrapper text-center active-tab">
			                    <div class="swiper-slide chose">全部</div> 
								<div class="swiper-slide ">2016</div>
								<div class="swiper-slide ">2015</div>
								<div class="swiper-slide ">2014</div> 
								<div class="swiper-slide ">2013</div> 
								<div class="swiper-slide ">2012</div> 
								<div class="swiper-slide ">2011</div>
								<div class="swiper-slide ">2010</div>
								<div class="swiper-slide ">2009</div>
								<div class="swiper-slide ">2008</div>
								<div class="swiper-slide ">2007</div>
								<div class="swiper-slide ">2006</div>
								<div class="swiper-slide ">2005</div>
								<div class="swiper-slide ">2004</div>
			                </div>
			            </div>
	                </div>
	    		</div>
	    		<div class="bd">
	    			<div class="mc">
	    				清晰度:
	    			</div>
	    			<div class="js-list">
				    	<div class="swiper-container">
			                <div class="swiper-wrapper text-center active-tab">
			                    <div class="swiper-slide chose">全部</div> 
								<div class="swiper-slide ">流畅</div>
								<div class="swiper-slide ">高清</div>
								<div class="swiper-slide ">超清</div>
								<div class="swiper-slide " style="width:46px !important;">1080P</div> 
			                </div>
			            </div>
	                </div>
	    		</div>
	    		<div class="bd">
	    			<div class="mc">
	    				排序:
	    			</div>
	    			<div class="js-list">
				    	<div class="swiper-container">
			                <div class="swiper-wrapper text-center active-tab">
			                    <div class="swiper-slide chose four-word">最具人气</div> 
								<div class="swiper-slide  four-word">最新发布</div>								
			                </div>
			            </div>
	                </div>
	    		</div>
	    		<div class="btnx">
	    			<span class="cz">重置</span>
	    			<span class="qd">确定</span>
	    		</div>
	    	</div>
	    </div>
	    <div class="bd" >
	    	<ul class="film-ul width-half">
	    		<li>
	    			<img src="img/iu.jpg" alt="" />
	    			<span>李恩智</span>
	    		</li>
	    		<li>
	    			<img src="img/iu.jpg" alt="" />
	    			<span>李恩智</span>
	    		</li>
	    		<li>
	    			<img src="img/iu.jpg" alt="" />
	    			<span>李恩智</span>
	    		</li>
	    		<li>
	    			<img src="img/iu.jpg" alt="" />
	    			<span>李恩智</span>
	    		</li>
	    		<li>
	    			<img src="img/iu.jpg" alt="" />
	    			<span>李恩智</span>
	    		</li>
	    		<li>
	    			<img src="img/iu.jpg" alt="" />
	    			<span>李恩智</span>
	    		</li>
	    	</ul>
	    	<div class="jz-data">数据加载中...</div>
	    </div>
	    <div class="footer">
	    	<div class="footer-bd">
	    		<ul>
	    			<li><a href="#">关于</a></li>
	    			<li><a href="#">招聘</a></li>
	    			<li><a href="#">反馈</a></li>
	    			<li><a href="#">帮助</a></li>
	    			<li><a href="#">About Us</a></li>
	    		</ul>
	    		<p class="bq">
	    			Copyright © 2016 All Rights Reserved.
	    		</p>
	    	</div>
	    </div>
	    <script type="text/javascript" src="js/jquery-2.2.3.min.js" ></script>
	    <script type="text/javascript" src="js/bootstrap.min.js" ></script>
	    <script type="text/javascript" src="js/swiper.min.js" ></script>
	    <script>
	    	
            var flag=1;
            $('.js .btn').click(function(){
            	if(flag==1){
		            //执行方法;
		            $('.js .content').slideDown();
		            var mySwiper = new Swiper('.swiper-container',{
		                freeMode : true,
		                freeModeMomentum : false,
		                slidesPerView : 6,
		            });
		            $(".swiper-slide").click(function(){
		           	    $(this).addClass("chose").siblings().removeClass('chose');
		            });
		            flag=0;
		        }else{
		            //执行方法;
		            $('.js .content').slideUp();
		            flag=1;
		        }
            });
            
            $('.js .content .btnx .cz').click(function(){
                $('.active-tab').each(function(){
            	    $(this).children('div:first').addClass("chose").siblings().removeClass('chose');
		        });
            })
            
            $('.js .content .btnx .qd').click(function(){
             	if(flag==0){
             		$('.js .content').slideUp();
             	}		        
		    });
            window.onload = function () {
               var $activeHeight= $(".active-height").height();
                $(".active-content").height($activeHeight);
            };            
            /*$(".swiper-slide").click(function(){

            	for(var i=0;i<$(".chose").length;i++){
            		alert($(".chose").eq(i).text());
            	}
            });*/
	    </script>
	</body>
</html>
